<!--
    by: yuanbiao 2021年07月29日
    name: message-box
    notes:
-->
<template>
  <div class="cmp cmp-message-box">
    <transition enter-active-class="animated bounceInDown" leave-active-class="animated bounceOutUp">
      <div v-show="visible" class="msgbox-content" :style="boxStyles">
          <div class="msgbox-header text-center">
              <slot name="header">
                  <span class="title">{{title}}</span>
              </slot>
          </div>
          <div class="msgbox-body">
              <slot name="body"></slot>
          </div>
          <div class="msgbox-footer text-center">
              <slot name="footer"></slot>
          </div>
          <div v-show="closable" class="msgbox-close" @click="closeClickHandler">
            <i class="fa fa-close" ></i>
          </div>
          <x-loading size="large" fix v-if="loadingCount>0"></x-loading>
      </div>
    </transition>
    <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
      <div v-show="visible" class="msgbox-mask" @click="maskClickHandler"></div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "cmp-message-box",
  props: {
      title: {
          type: String,
          default: ''
      },
      closable: {
          type: Boolean,
          default: true
      },
      'mask-closable': {
          type: Boolean,
          default: true
      },
      width: {
        type: [String, Number],
        default: '433px'
      },
      height: {
        type: [String, Number],
        default: '250px'
      },
      padding: {
        type: [String, Number],
        default: '3.46%'
      }
  },
  data() {
    return {
      visible: false,
      loadingCount: 0
    }
  },
  computed: {
    boxStyles () {
      let width = this.width || 433
      let height = this.height || 250
      let padding = this.padding || 0
      if (/^\d$/.test(width)) { width = `${width}px` }
      if (/^\d$/.test(height)) { height = `${height}px` }
      if (/^\d$/.test(padding)) { padding = `${padding}px` }
      return {
        width, height, padding
      }
    }
  },
  methods:{
    show () {
      this.visible = true
      this.$emit("showModal")
    },
    close () {
      this.visible = false
      this.loadingCount = 0
      this.$emit("closeModal")
    },
    closeClickHandler () {
      if (this.closable) {
        this.close()
      }
    },
    maskClickHandler () {
      if (this['mask-closable']) {
        this.close()
      }
    }
  },
  mounted() {
  }
}
</script>

<style lang="less">
@import "~@/assets/css/_mixins.less";
@import "~@/assets/css/_color.less";
.cmp-message-box {
  .msgbox-content {
    .fixed-margin-center;
    z-index: 100;
    width: 433px;
    height: 250px;
    padding: 3.46%;
    background: url("~@/assets/images/public/message-box.png") no-repeat center/cover;
    display: flex;
    flex-direction: column;
    .msgbox-header {
      margin-bottom: 10px;
      .title {
        display: inline-block;
        padding: 4px 50px;
        font-size: 18px;
        text-indent: .3em;
        letter-spacing: .3em;
        color: @colorPrimary;
        background: url("~@/assets/images/public/page-title-img-l.png") no-repeat left bottom,
            url("~@/assets/images/public/page-title-img-r.png") no-repeat right bottom;
        background-size: 50px auto;
      }
    }
    .msgbox-body {
      height: 0;
      flex-grow: 1;
      overflow: hidden auto;
    }
    .msgbox-footer {
        margin-top: 10px;
    }
    .msgbox-close {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: -40px;
      width: 28px;
      height: 28px;
      border: 2px solid @borderInfo;
      border-radius: 50%;
      color: @borderInfo;
      background-color: #fff;
      cursor: pointer;
      .flex-center;
      .fa {
        font-size: 18px;
        color: @borderInfo;
      }
      &::before {
        content: "";
        width: 0;
        height: 15px;
        border-left: 2px solid @borderInfo;
        position: absolute;
        left: 50%;
        top: -15px;
        transform: translateX(-50%);
      }
    }
  }
  .msgbox-mask {
    .fixed-fullscreen-mask;
    z-index: 99;
  }
}
</style>
